import React, {useRef, useState} from 'react';
import {Tabs,Space, Table, Tag } from 'antd';
import styles from './StreamInfo.less'

const StreamInfo = ({
  dataSource
}) => {

  const onChange = (key) => {
    console.log(key);
  };
  const locationColumns = [
    {
      title: '车辆',
      dataIndex: "vehicleName",
      width: 120,
      render: (text) => <a>{text}</a>,
    },
    {
      title: '通讯ID',
      dataIndex: "commId",
      width: 120,
      render: (text) => <a>{text}</a>,
    },
    {
      title: '接收时间',
      dataIndex: 'recTime',
      width: 180,
    },
    {
      title: '定位时间',
      dataIndex: 'locTime',
      width: 180,
    },
    {
      title: 'ACC',
      dataIndex: 'status',
      width: 120
    },
    {
      title: '经度',
      dataIndex: 'lng',
      width: 120
    },
    {
      title: '纬度',
      dataIndex: 'lat',
      width: 120
    },
    {
      title: '速度',
      dataIndex: 'velocity',
      width: 120
      
    },
    {
      title: '方向',
      dataIndex: 'dir',
      width: 120
    },
    {
      title: '里程',
      dataIndex: 'mil',
      width: 120
    }
  ];
  
  const commandColumns = [
    {
      title: '车辆',
      dataIndex: 'vehicleName',
      width: 120
    },
    {
      title: '指令',
      dataIndex: 'command',
      width: 120
    },
    {
      title: '发送时间',
      dataIndex: 'sendTime',
      width: 120
    },
    {
      title: '发送内容',
      dataIndex: 'sendContent',
      width: 120
    },
    {
      title: '结果',
      dataIndex: 'result',
      width: 120
    },
  ];

  const TabArray = [
    {
      label: '位置信息',
      key: 'location',
      children: <div>
        <Table 
          dataSource={dataSource} 
          columns={locationColumns} 
          size='small'
          scroll={
            {
            scrollToFirstRowOnChange:true,
            x:200,
            y:140,
          }
          }/>

      </div>
    },
    // {
    //   label: '报警信息',
    //   key: 'alarm',
    //   children: <div>
    //     <Table 
    //       dataSource={dataSource} 
    //       columns={columns} 
    //       size='small'
    //       scroll={
    //         {
    //         scrollToFirstRowOnChange:true,
    //         x:200,
    //         y:140,
    //       }
    //     }/>
    //   </div>
    // },
    {
      label: '指令信息',
      key: 'command',
      children: <div>
        <Table 
          dataSource={dataSource} 
          columns={commandColumns} 
          size='small'
          scroll={
            {
            scrollToFirstRowOnChange:true,
            x:200,
            y:140,
          }
          }/>

      </div>
    },
  ];

  return (
    <div className={styles.container}>
      <Tabs
        onChange={onChange}
        type="card"
        items={TabArray}
      />
    </div>
  );
}
export default StreamInfo;
